<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .font1{
            font-size: 30px;
        }
        .font2{
            font-size: 80%;
        }
        ul li{
            list-style: none;
        }
        .small{
            font-size: small;
        }
        .like{
            float: right;
        }
    </style>
    <script src="/jquery-3.4.1.min.js"></script>
    <script src="/jquery.form.js"></script>
</head>
<body>
    <img class="song-albumImg" th:src="${song.albumImg}"/>
    <div style="display: block">
        <label class="font2" style="background: palevioletred">单 曲 ：</label>
        <span class="font1 song-name" th:text="${song.name}"></span>
    </div>
    <a href="#" class="player-btn" id="player-btn" th:data-id="${song.id}" style="display: block">播放</a>
    <audio preload="metadata" id="player" style="display: none;" src="" controls="controls"></audio>

    <h3><label>歌手：</label><span class="song-singer" th:text="${song.singer}"></span></h3>
    <h3><label>所属专辑：</label><span class="song-albumName" th:text="${song.albumName}"></span></h3>
    <h3><label>评论数：</label><span class="song-commentCount" th:text="${song.commentCount}"></span></h3>
    <div class="song-lyrics" th:utext="${song.lyrics}"></div>

    <iframe src="/comment/post" id="myIframe" height="500px" width="100%" scrolling="auto" frameborder="0"></iframe>
    <h3>相似歌曲</h3>
    <ul>
        <li>
            <a href="#" class="change-song" id="someone" data-id="16435049">Someone Like You</a>
            <a href="#" class="change-song" id="hello" style="display: none" data-id="35847388">Hello</a>
        </li>
    </ul>
    <script>
        $(function () {
            $(".player-btn").on("click",function (e) {
                e.preventDefault();
                let songId = document.getElementById("player-btn").getAttribute("data-id");
                $.ajax({
                    url: "/song/music",
                    method: "GET",
                    data: {
                        songId: songId
                    },
                    cache: false
                })
                .done(function (data) {
                    $("#player").show();
                    $("#player").attr("src",data);//把data写到audio标签的src里
                    document.getElementById("player").play();
                });
            });

        //切换歌曲
        $(".change-song").on('click',function (e) {
            e.preventDefault();
            let songId = $(this).data("id");
            $.ajax({
                url: "/songinfo/get",
                method: "GET", //获取数据
                data: {
                    songId: songId
                },
                cache: false
            })
                .done(function (data) {
                    $('.song-albumImg').attr('src',data.albumImg);
                    $('.song-albumName').html(data.albumName);
                    $('.song-commentCount').html(data.commentCount);
                    $('.song-lyrics').html(data.lyrics);
                    $('.song-name').html(data.name);
                    $('.song-singer').html(data.singer);
                    $(".player-btn").attr("data-id",songId);
                    document.getElementById("player").pause();
                    document.getElementById("player").setAttribute("style","display:none");
                    if(songId=="16435049"){//Hello
                        document.getElementById("hello").removeAttribute("style");
                        document.getElementById("someone").setAttribute("style","display:none");
                    }else if(songId=="35847388"){//Some One Like You
                        document.getElementById("someone").removeAttribute("style");
                        document.getElementById("hello").setAttribute("style","display:none");
                    }

                });
            });
            $(".like-btn").on('click',function(e){
                e.preventDefault();//阻断浏览器默认行为
                let self = $(this);//得到当前的超链接
                let commentId = self.data('id');//得到了后端传来的data-id的值
                $.ajax({
                    url:"/comment/like",
                    method:"POST",
                    data:{
                        songId:"35847388",
                        commentId:commentId
                    },
                    cache:false//不让浏览器做缓存
                })//传参
                    .done(function (data) {//data是由commentLikeControl提供的json
                        self.html(data.likeNum);
                    });
            });
        });

    </script>
</body>
</html>